<template>
  <div>
    <div class="profile">
      <div class="profilr-l clearfix" @click="goToUserinfo">
        <i class="iconfont pro_icon">
          &#xe61c;
        </i>
        <div class="logon_re">
          <span v-if="!userInfo.phone">{{
            userInfo.name || '登录 / 注册'
          }}</span>
          <p>
            <i class="iconfont phone_icon">&#xe63d;</i
            >{{ userInfo.phone || '暂无绑定手机号' }}
          </p>
        </div>
      </div>
      <div class="profilr-r">
        <i class="iconfont right">&#xe603;</i>
      </div>
    </div>
    <div class="statistical">
      <div href="#" class="clearfix">
        <p><span class="price">0.00</span>元</p>
        <p class="text">我的余额</p>
      </div>
      <div href="#">
        <p><span class="price">0</span>个</p>
        <p class="text">我的优惠</p>
      </div>
      <div href="#">
        <p><span class="price">0</span>分</p>
        <p class="text">我的积分</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    goToUserinfo() {
      if (this.userInfo._id) {
        this.$router.push('/userinfo')
      } else {
        this.$router.push('/login')
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.statistical {
  overflow: hidden;
  div {
    height: 2.133333rem;
    width: 33.333%;
    background-color: #fff;
    float: left;
    text-align: center;
    padding-top: 0.8rem;
    .price {
      font-size: 0.8rem;
      color: #ff9900;
    }
    .text {
      color: #666;
      font-size: 0.373333rem;
      margin-top: 0.266667rem;
    }
  }
}
.phone_icon {
  padding-right: 0.103333rem;
  font-size: 0.4rem;
}
.profile {
  background-color: #02a774;
  border-top: 0.026667rem solid #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.666667rem;
  padding-left: 0.346667rem;
  .pro_icon {
    height: 1.753333rem;
    width: 1.9653333rem;
    display: block;
    background-color: #999;
    font-size: 1.233333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    overflow: hidden;
    float: left;
  }
  .logon_re {
    float: left;
    color: #fff;
    margin-top: 0.433333rem;
    padding-left: 0.373333rem;
    span {
      font-size: 0.48rem;
      font-weight: 600;
    }
    p {
      padding-top: 10px;
      font-size: 0.373333rem;
    }
  }
  .right {
    font-size: 0.833333rem;
    color: #fff;
  }
}
</style>
